<template>
  <div class="dc-url sa-flex">
    <el-input v-model="path" :placeholder="placeholder" @input="changeurl">
      <template #append>
        <span class="cursor-pointer" @click="selecturl">选择</span>
      </template>
    </el-input>
  </div>
</template>
<script>
  export default {
    name: 'dc-url',
  };
</script>
<script setup>
  import { ref, watch } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import PageSelect from '@/app/shop/admin/data/page/select.vue';

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入或选择',
    },
  });

  const path = ref(props.modelValue);
  watch(
    () => props.modelValue,
    () => {
      path.value = props.modelValue;
    },
  );

  function changeurl() {
    emit('update:modelValue', path.value);
  }
  function selecturl() {
    useModal(
      PageSelect,
      { title: '选择链接' },
      {
        confirm: (res) => {
          emit('update:modelValue', res.data.path);
        },
      },
    );
  }
</script>
